<template>
  <div class="chat">
    <Navbar :title="title" />
    <!-- 聊-轮播图 -->
    <div class="chat-banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img
            src="http://10.31.169.37:3000/images/王/chat/chat-banner1.png"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="http://10.31.169.37:3000/images/王/chat/chat-banner2.png"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="http://10.31.169.37:3000/images/王/chat/chat-banner3.png"
            alt=""
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="http://10.31.169.37:3000/images/王/chat/chat-banner4.png"
            alt=""
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 聊-上部内容 -->
    <div class="chat-top">
      <div class="search">
        <span>搜索</span>
        <span>分类</span>
      </div>
      <div class="detail">
        <div class="title">
          <span>热门话题</span>
          <i>更多></i>
        </div>
        <ul>
          <li>
            <i>#</i>
            <span>「征集」你想聊的话题</span>
            <em>39.1k条讨论</em>
          </li>
          <li>
            <i>#</i>
            <span>你们是每天敷面膜吗</span>
            <em>1671条讨论</em>
          </li>
          <li>
            <i>#</i>
            <span>给学生党的彩妆合集（评价又好用）</span>
            <em>1877条讨论</em>
          </li>
        </ul>
      </div>
      <div class="detail">
        <div class="title">
          <span>同肤质在聊</span>
          <i>更多></i>
        </div>
        <ul>
          <li>
            <i>#</i>
            <span>适合油皮的眼霜推荐</span>
            <em>39.1k条讨论</em>
          </li>
          <li>
            <i>#</i>
            <span>大油田也别作死，过度清洁会烂脸</span>
            <em>1671条讨论</em>
          </li>
          <li>
            <i>#</i>
            <span>白天脸上爱出油，吸油纸还是保湿喷雾</span>
            <em>1877条讨论</em>
          </li>
        </ul>
      </div>
      <div class="detail">
        <div class="title">
          <span>新话题</span>
          <i>更多></i>
        </div>
        <ul>
          <li>
            <i>#</i>
            <span>适合油皮的眼霜推荐</span>
            <em>39.1k条讨论</em>
          </li>
          <li>
            <i>#</i>
            <span>大油田也别作死，过度清洁会烂脸</span>
            <em>1671条讨论</em>
          </li>
          <li>
            <i>#</i>
            <span>白天脸上爱出油，吸油纸还是保湿喷雾</span>
            <em>1877条讨论</em>
          </li>
        </ul>
      </div>
    </div>
    <!-- 聊-下部内容 -->
    <div class="chat-botttom">
      <div class="botm-title">
        <h3>今天聊什么</h3>
      </div>
      <div class="botm-details">
        <ul>
          <li>关注</li>
          <li class="detail-active">精选</li>
          <li>新帖</li>
          <li>一周最热</li>
          <li>一周最热</li>
          <li>一周最热</li>
          <li>一周最热</li>
        </ul>
        <div class="img">
          <div class="lists-box">
            <h4>适合油皮的眼霜推荐</h4>
            <img
              src="http://10.31.169.37:3000/images/王/chat/chat-banner1.png"
              alt=""
            />
            <p>法国cattier矿物泥面膜四五十块钱便宜大碗好用</p>
            <div class="box-footer">
              <div>
                <img
                  src="http://10.31.169.37:3000/images/王/chat/chat-banner1.png"
                  alt=""
                />
                <span>小熊软糖</span>
              </div>
              <img
                src="http://10.31.169.37:3000/images/王/chat/chat-banner3.png"
                alt=""
              />
            </div>
          </div>
          <a href="#">
            <img
              src="http://10.31.169.37:3000/images/王/chat/jingxuanzu1.png"
              alt=""
              class="jingxuanzu1"
            />
          </a>
          <a href="#">
            <img
              src="http://10.31.169.37:3000/images/王/chat/jingxuanzu2.png"
              alt=""
              class="jingxuanzu2"
            />
          </a>
          <a href="#">
            <img
              src="http://10.31.169.37:3000/images/王/chat/jingxuanzu3.png"
              alt=""
              class="jingxuanzu3"
            />
          </a>
          <a href="#">
            <img
              src="http://10.31.169.37:3000/images/王/chat/jingxuanzu4.png"
              alt=""
              class="jingxuanzu4"
            />
          </a>
          <a href="#">
            <img
              src="http://10.31.169.37:3000/images/王/chat/chat-jingxuan1.png"
              alt=""
              class="jingxuanzu5"
            />
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from "vant";
import Navbar from "../Navbar";
export default {
  data() {
    return {
      //title 标题
      title: "聊",
      //是否有权限
      map: false,
      //首页的按钮列表
      count: 0,
      isLoading: false,
    };
  },
  components: {
    VanSwipe: Swipe,
    VanSwipeItem: SwipeItem,
    Navbar,
  },
};
</script>
<style lang="less" scoped>
@import "../../assets/css/var";
// 聊-轮播图
.my-swipe .van-swipe-item {
  margin-top: 46px;
  color: #fff;
  text-align: center;
  img {
    width: 375px;
    height: 150px;
  }
}

.chat-top {
  width: 100%;
  background: #fff;

  .search {
    width: 100%;
    height: 60px;
    border-bottom: 2px #ccc solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      width: 50%;
      text-align: center;
      line-height: 40px;
      font-size: 17px;
      font-weight: 550;
    }
    span:first-child {
      border-right: 1px #eee solid;
    }
  }
  .detail {
    width: 100%;
    border-bottom: 2px #ccc solid;
    padding: 0 10px;
    overflow: hidden;
    position: relative;
    .title {
      width: 100%;
      height: 17px;
      padding: 40px 0 40px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-size: 17px;
        font-weight: 550;
      }
      i {
        color: #aaa;
        font-size: 15px;
      }
    }
    ul {
      width: 100%;
      li {
        width: 100%;
        font-size: 15px;
        margin-bottom: 15px;
        i {
          color: #11dddd;
          margin-right: 10px;
        }
        span {
          font-weight: 550;
          margin-right: 10px;
        }
        em {
          font-size: 12px;
          font-weight: 500;
          color: #aaa;
        }
      }
    }
  }
}
// 聊-下部内容
.chat-botttom {
  width: 100%;
  background: #fff;
  padding: 0 10px;
  position: relative;
  .botm-title {
    width: 100%;
    height: 17px;
    padding: 40px 0 40px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      font-size: 17px;
      font-weight: 550;
    }
  }
  .botm-details {
    ul {
      display: flex;
      overflow: scroll;
      white-space: nowrap;
      height: 100%;
      li {
        display: inline-block;
        font-size: 17px;
        color: #ccc;
        margin: 0 15px 0 10px;
        padding-bottom: 10px;
      }
      .detail-active {
        color: rgb(30, 194, 194);
        border-bottom: 1px solid rgb(30, 194, 194);
      }
    }
    ul::-webkit-scrollbar {
      display: none;
    }
    .img {
      display: flex;
      justify-content: space-around;
      // align-items: center;
      flex-wrap: wrap;
      width: 100%;
      margin-top: 10px;
      .lists-box {
        width: 170px;
        height: 280px;
        border: 2px solid #ddd;
        border-radius: 5px;
        background: #fff;
        h4 {
          font-size: 14px;
          text-align: center;
          line-height: 40px;
          background: #eee;
          border-top-left-radius: 2px;
          border-top-right-radius: 2px;
        }
        img {
          width: 100%;
          height: 150px;
        }
        p {
          display: inline-block;
          font-size: 10px;
          margin: 5px;
          line-height: 18px;
          margin-top: 5px;
        }
        .box-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 10px;
          margin-top: 10px;
          div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            img {
              width: 15px;
              height: 15px;
              border-radius: 50%;
            }
            span {
              margin-left: 10px;
              font-size: 10px;
            }
          }
          img {
            width: 30px;
            height: 15px;
          }
        }
      }
      img {
        width: 170px;
      }
    }
  }
}
</style>
